<script setup lang="ts">
import {ref} from 'vue'
import List from './components/List.vue'
import axios from 'axios'
import {type ChannelRes, type ChannelItem} from './types/data'
import {storeToRefs} from 'pinia'
import { useCounterStore} from './store/index'

const store = useCounterStore()
console.log(222,store);

const channelList = ref<ChannelItem[]>([])
const getChannelList = async () => {
  const res = await axios.request<ChannelRes>({
    url: 'http://geek.itheima.net/v1_0/channels'
  })
  console.log();
  channelList.value = res.data.data.channels
}
// getChannelList()

// 切换tab 改变channelId
const channelId = ref(0)
const changeChannel = (id: number) => {
  console.log(id);
  channelId.value = id
  
}
const { count, doubleCount } = storeToRefs(store) 
</script>

<template>
  {{ count }} -- {{ doubleCount }}
  <button @click="store.changeCount">+1</button>
  <button @click="store.changeCountAsync">+10</button>
  <!-- <List></List> -->
  <!-- tab切换 -->
  <van-tabs @change="changeChannel">
    <van-tab v-for="item in channelList" :key="item.id" :title="item.name">
      <!-- 文章列表组件 -->
      <List :channelId="channelId" />
    </van-tab>
  </van-tabs>

</template>


